<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">过程数据管理</span>
          </div>
          <div class="header-right-wraper">
            <CButton
              color="info"
              class="system-btn-style"
              @click="openNewTask"
              data-permission="Btn_Template_Add"
            >
              <CIcon name="cil-plus" />&nbsp;任务
            </CButton>
            <!--                    <CButton
                            color="info"
                            style="margin-left: 15px"
                            class="system-btn-style"
                            @click="goToDailyRecord "
                            data-permission="Btn_Template_Add"
                    >
                        日志
                    </CButton>-->
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 46px)">
            <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
              <template v-slot:cron="item">
                <div>{{ $$findCorn(cronList, item.data.row.cron) }}</div>
              </template>
              <template v-slot:rule="item">
                <div>{{ item.data.row.rule }}</div>
              </template>
              <template v-slot:status="item">
                <div>{{ item.data.row.status == 1 ? "启用" : "禁用" }}</div>
              </template>
              <template v-slot:show_details="item">
                <CButton
                  title="启用"
                  v-if="item.data.row.status != 1"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="startTaskCancel(item.data.row)"
                >
                  启用
                </CButton>
                <CButton
                  title="禁用"
                  v-if="item.data.row.status == 1"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="startTaskCancel(item.data.row)"
                >
                  禁用
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_Template_Up"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="delCancel(item.data.row)"
                  data-permission="Btn_Template_Del"
                >
                  删除
                </CButton>
                <CButton
                  title="日志"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="goToDailyRecord(item.data.row)"
                  data-permission="Btn_Template_Del"
                >
                  日志
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>
      </CCard>
    </div>

    <!--删除任务-->
    <Modal v-model="delShow" draggable scrollable title="删除任务">
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="delKuangBody">
        <p>您正在删除该任务信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!--启用任务-->
    <Modal
      v-model="startTask"
      draggable
      scrollable
      :title="courentRowData.status == 1 ? '禁用任务' : '启用任务'"
    >
      <p slot="header" class="modalHeader">
        <i class="fa fa-hourglass-half reStartDemo"></i>
        <span style="margin-left: 5px">{{
          courentRowData.status == 1 ? "禁用任务" : "启用任务"
        }}</span>
      </p>
      <div class="delKuangBody">
        <p>您正在{{ courentRowData.status == 1 ? "禁用" : "启用" }}该任务</p>
        <p>请确认是否{{ courentRowData.status == 1 ? "禁用" : "启用" }}?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="startTask = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="startTaskConfim" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!--新建修改任务-->
    <Modal
      v-model="newTask"
      draggable
      scrollable
      title="新建任务"
      class="newTaskClass"
      :width="800"
    >
      <Form
        ref="formValidate"
        :model="newTaskData"
        :rules="newTaskDataRule"
        :label-width="140"
      >
        <FormItem label="名称：" prop="name" class="nameClass">
          <Input v-model="newTaskData.name" placeholder="请输入任务名称" />
        </FormItem>
        <FormItem label="扫描目录：" prop="catalog">
          <!--<Input search enter-button placeholder="Enter something..." />-->
          <Input
            v-model="newTaskData.catalog"
            placeholder="请选择扫描路径"
            search
            enter-button="选择目录"
            @on-search="openSelectTree"
          />
        </FormItem>
        <FormItem label="扫描间隔：" prop="cron">
          <Select v-model="newTaskData.cron">
            <template v-for="(item, index) in cronList">
              <Option :value="item.dictCode" :key="index">{{
                item.dictName
              }}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="扫描规则：" prop="rule">
          <InputNumber
            v-model="newTaskData.rule"
            placeholder="正值表示时间之前，负值表示时间之后！"
          ></InputNumber>
          <!--   <Select v-model="newTaskData.rule" >
                        <Option value="+3">  >3天 </Option>
                        <Option value="-3">  <3天  </Option>
                    </Select>-->
        </FormItem>
        <FormItem label="扫描状态：" prop="status">
          <RadioGroup v-model="newTaskData.status">
            <Radio :label="0">暂停</Radio>
            <Radio :label="1">启动</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="备注:">
          <Input v-model="newTaskData.remark" type="textarea" maxlength="50" />
        </FormItem>
      </Form>
      <template #footer class="footerBtns">
        <CButton @click="newTaskCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="newTaskConfim" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--文件选择-->
    <file-catalog
      ref="refFileCatalogModal"
      :modalShow="fileCatalogModal"
      v-if="fileCatalogModal"
      :requestType="3"
      @closed="fileCatalogModalClose"
      @menuOk="fileCatalogModalOk"
    ></file-catalog>
  </div>
</template>

<script>
import TableList from "../../../template/table/TableList";
import fileCatalog from "../../jobProcess/fileCatalog";

export default {
  name: "processData",
  components: { TableList, fileCatalog },
  data() {
    return {
      getColumns: [
        {
          title: "名称",
          key: "name",
          width: 180,
        },
        {
          title: "扫描目录",
          key: "catalog",
        },
        {
          title: "扫描间隔",
          key: "cron",
          slot: "cron",
          width: 100,
          className: "centerText",
        },
        {
          title: "清理规则",
          key: "rule",
          slot: "rule",
          width: 80,
          className: "centerText",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 180,
          className: "centerText",
        },
        {
          title: "更新时间",
          key: "updateTime",
          width: 180,
          className: "centerText",
        },
        {
          title: "备注",
          key: "remark",
          width: 150,
        },
        {
          title: "状态",
          key: "status",
          slot: "status",
          width: 80,
          className: "centerText",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          width: 280,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.manageApi.fileManageQuery, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
      newTaskData: {
        // 新建任务表单项
        name: "",
        catalog: "",
        cron: "0 0 0 1/1 * ? ",
        rule: 3,
        status: 1,
        remark: "",
      },
      newTaskDataRule: {
        name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        catalog: [
          { required: true, message: "请选择扫描路径", trigger: "blur" },
        ],
      }, // 新建任务校验
      newTask: false, // 添加任务
      delShow: false, // 人去删除
      startTask: false, // 启用任务
      fileCatalogModal: false, // 文件选择页面
      courentRowData: {},
      cronList: [], // 字典表
    };
  },
  computed: {},
  mounted() {
    this.getCronItem();
  },
  methods: {
    openNewTask() {
      this.newTask = true;
      this.courentRowData = {};
    },
    // 确定或者取消新建
    newTaskCancel() {
      this.$refs.formValidate.resetFields();
      this.newTaskData.remark = "";
      this.newTask = false;
    },
    newTaskConfim() {
      let that = this;
      that.$refs.formValidate.validate((valid) => {
        if (valid) {
          let url = that.courentRowData.id
            ? that.$api.manageApi.fileManageUpdate + that.courentRowData.id
            : that.$api.manageApi.fileManageAdd;
          that.http
            .post(url, that.newTaskData)
            .then((res) => {
              if (res.status === 200) {
                that.newTask = false;
                that.$refs.formValidate.resetFields();
                that.$refs.table.getRefreshTable();
                that.$Message.success("保存成功!");
              } else {
                that.$Message.error("保存失败！");
              }
            })
            .catch(() => {
              that.$Message.error("保存失败，请联系管理员！");
            });
        } else {
          that.$Message.error("请完整填写表单！");
        }
      });
    },
    // 打开选择树  文件操作
    openSelectTree() {
      let that = this;
      this.fileCatalogModal = true;
      this.$nextTick(() => {
        that.$refs.refFileCatalogModal.initFileTree(
          { type: { name: "dir" } },
          true
        );
      });
    },
    fileCatalogModalClose() {
      this.fileCatalogModal = false;
    },
    fileCatalogModalOk(data) {
      this.newTaskData.catalog = data;
      this.fileCatalogModal = false;
    },

    //任务 删除
    delCancel(data) {
      this.delShow = true;
      this.courentRowData = data;
    },
    delOk() {
      let that = this;
      this.http
        .delete(this.$api.manageApi.fileManageDelete + this.courentRowData.id)
        .then((item) => {
          if (item.data.success) {
            that.delShow = false;
            that.$Message.success("删除成功!");
            that.$refs.table.getRefreshTable();
          } else {
            that.$Message.error("删除失败！");
          }
        })
        .catch(() => {
          that.$Message.error("删除失败，请联系管理员！");
        });
    },
    // 任务启用
    startTaskCancel(data) {
      this.startTask = true;
      this.courentRowData = data;
    },
    startTaskConfim() {
      let that = this;
      this.courentRowData.status == 1
        ? (this.courentRowData.status = 0)
        : (this.courentRowData.status = 1);
      var formdata = new FormData();
      formdata.append("status", this.courentRowData.status);

      this.http
        .post(
          this.$api.manageApi.fileManageUpdateStatus + this.courentRowData.id,
          formdata
        )
        .then((item) => {
          if (item.data.success) {
            that.startTask = false;
            that.$Message.success("保存成功!");
            that.$refs.table.getRefreshTable();
          } else {
            that.$Message.error("保存失败！");
          }
        })
        .catch(() => {
          that.$Message.error("保存失败，请联系管理员！");
        });
    },

    // 编辑任务
    update(data) {
      this.newTask = true;
      data.rule = parseInt(data.rule);
      this.courentRowData = JSON.parse(JSON.stringify(data));
      this.newTaskData = JSON.parse(JSON.stringify(data));
    },
    // 进入日志
    goToDailyRecord(data) {

      this.$router.push({
        name: "dailyRecord",
        params: data,
      });
    },
    getCronItem() {
      let that = this;
      this.http
        .get(this.$api.manageApi.getAllChildByDictCode, { dictCode: "cron" })
        .then((item) => {
          if (item.status === 200) {
            this.cronList = item.data.data.dictCodeList;
          } else {
            that.$Message.error("获取字典项错误！");
          }
        })
        .catch((err) => {
          this.$Message.error("获取字典项错误，请联系管理员！");
        });
    },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (min-width: 1367px) {
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.templateTitle {
  margin-bottom: 0 !important;
}

.page-link:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.templateMangeTable {
  height: 100%;
  overflow-y: auto;
}
.template {
  height: calc(100% - 52px);
  overflow-y: auto;
}
.ipTestStyle {
  font-size: 8px;
  width: 250px;
  height: 2px;
  margin-top: -6px;
  margin-bottom: 16px;
  margin-left: 120px;
}
.spanLabel {
  font-size: 14px;
}
.btnSelectInfo {
  width: 70px;
  height: 29px;
  font-size: 14px;
  margin-left: 18px;
  margin-bottom: 11px;
  margin-top: 10px;
}
.treeDiv {
  height: 400px;
  width: 466px;
  overflow-y: auto;
}
.showContent {
  height: 466px;
}
.showContentLeft {
  max-width: 50%;
}
.showContentRight {
  max-width: 50%;
  height: 466px;
  overflow-x: hidden;
  overflow-y: auto;
}
.paramli {
  align-items: center;
  display: flex;
  height: 50px;
}
.selectParamKey {
  width: 95%;
  position: absolute;
  left: 105px;
  margin-bottom: 0;
}
.selectParamLabel {
  width: 25%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}

/deep/.col-form-label {
  text-align: right;
}

/deep/.ivu-form-item-error-tip {
  top: 4px;
  left: 385px;
  z-index: 2;
  width: 100px;
}
.nameClass /deep/.ivu-form-item-error-tip {
  left: 475px;
}
.newTaskClass /deep/.ivu-modal-body {
  padding-right: 55px;
}
/deep/.ivu-form-item {
  margin-bottom: 10px;
}
.reStartDemo {
  font-size: 24px;
  color: #3c6ef0;
}

/deep/.ivu-input-group-append {
  background-color: #3c6ef0;
}

/deep/.ivu-input-number {
  width: 100%;
}
</style>
